<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .box{width: 100px;height: 100px;}
      .bg_red{background: red;}
      .border{border: solid 2px black;}
      .fs{font-size: 30px;}
    </style>
	</head>
	<body>
    <div id="app">
      <p>{{title}}</p>
      <div class="box">hello</div>
      <div :class="a">hello</div>
      <div :class="[a,b,c]">hello</div>
      <div :class="{box:flag,bg_red:flag,border:!flag}">hello</div>
      <div :class="'border'">hello</div>
      <div :class="!flag ? 'border' : 'fs'">hello</div>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    
    const vm = new Vue({
      el:"#app",
      data:{
        title:"hello 动态的class和style",
        a:"bg_red",
        b:"border",
        c:"fs",
        flag:true
      }
    })
    
  </script>
</html>
